<template>
    <div>
        <el-card>
            <template>
                <el-table :data="form" border stripe>
                    <el-table-column prop="menuname" label="菜单名称"></el-table-column>
                    <el-table-column prop="ctime" label="创建时间"></el-table-column>
                    <el-table-column prop="group" label="组"></el-table-column>
                    <el-table-column label="子菜单">
                        <template #default="{ row }">
                            <div>
                                <div v-for="a in row.children" :key="a._id">
                                    {{ a.menuname }}
                                    <el-button type="text" @click="delMenus(a._id)">删除</el-button>
                                    <el-button type="text" @click="edit(a._id)">编辑</el-button>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="{ row }">
                            <div>
                                <el-button type="text" @click="delMenus(row._id)">删除</el-button>
                                <el-button type="text" @click="edit(row._id)">编辑</el-button>
                                <el-button type="text" @click="add(row._id)">添加子菜单</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-card>
    </div>
</template>
  
<script>
import { getMenus, delMenus } from "@/api/menus";
export default {
    data() {
        return {
            form: [],
        };
    },
    async created() {
        await this.getMenus();
    },
    methods: {
        async getMenus() {
            const { data } = await getMenus();
            this.form = data;
        },
        add(id) {
            this.$router.push({ name: "MenusAdd", query: { id } });
        },
        async delMenus(id) {
            try {
                await this.$confirm("确定删除吗？");
                await delMenus(id);
                this.$message.success("删除成功");
                await this.getMenus();
                localStorage.removeItem("menus");
            } catch (error) { }
        },
        edit(id) {
            this.$router.push({ name: 'MenusEdit', query: { id } })
        }
    },
};
</script>
  